<template>
	<div class="web">
		<div class="card " style="width: 18rem;">
			<div class="card-header d-flex justify-content-between align-items-center">
				<div class="form-check">
					<input v-model="allchecked" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
					<label class="form-check-label" for="flexCheckDefault">
						列表1
					</label>
				</div>
				<span class="badge bg-primary rounded-pill">{{count}}/{{number}}</span>
			</div>
			<ul class="list-group list-group-flush overflow-auto" style="height: 300px;">
				<li class="list-group-item border-bottom-0" v-for="(item, index) in list" :key="index">
					<div class="form-check">
						<input v-model="item.selected" class="form-check-input" type="checkbox" value=""
							id="flexCheckDefault">
						<label class="form-check-label" for="flexCheckDefault">
							{{item.name}}
						</label>
					</div>
				</li>
			</ul>
		</div>
		<button @click="handleLeft('id')" type="button" class="btn arrows btn-primary" :disabled='!show'>
			< </button>
				<button @click="handleRight('id')" type="button" class="btn btn-primary" :disabled='!shows'> >
				</button>
				<div class="card right overflow-auto" style="width: 18rem;">
					<div class="card-header d-flex justify-content-between align-items-center">
						<div class="form-check">
							<input v-model="allcheckeds" class="form-check-input" type="checkbox" value=""
								id="flexCheckDefault">
							<label class="form-check-label" for="flexCheckDefault">
								列表2
							</label>
						</div>
						<span class="badge bg-primary rounded-pill">{{counts}}/{{numbers}}</span>
					</div>
					<ul class="list-group list-group-flush overflow-auto" style="height: 300px;">
						<li class="list-group-item border-bottom-0" v-for="(right, index) in lists" :key="index">
							<div class="form-check">
								<input v-model="right.selected" class="form-check-input" type="checkbox" value=""
									id="flexCheckDefault">
								<label class="form-check-label" for="flexCheckDefault">
									{{right.name}}
								</label>
							</div>

						</li>

					</ul>
				</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}

			},
			lists: {
				type: Array,
				default: function() {
					return [];
				}
			},
		},
		computed: {
			number() {
				return this.list.length;
			},
			numbers() {
				return this.lists.length;
			},
			allchecked: {
				set(newValue) {

					this.list.forEach((items) => { items.selected = newValue });
				},
				get() {
					if (this.list.length === 0) {
						return false;
					}
					return this.list.every((items) => items.selected === true);
				},

			},
			allcheckeds: {
				set(newValue) {
					this.lists.forEach((rights) => { rights.selected = newValue });
				},
				get() {
					if (this.lists.length === 0) {
						return false;
					}
					return this.lists.every((rights) => rights.selected === true);
				},

			},
			count() {
				return this.list.reduce((total, items) => {

					if (items.selected) {
						return total + items.selected;
					} else {
						return total
					}
				}, 0)
			},
			counts() {
				return this.lists.reduce((total, rights) => {

					if (rights.selected) {
						return total + rights.selected;
					} else {
						return total
					}
				}, 0)
			},
			shows() {
				return this.list.some(item => item.selected)
			},
			show() {
				return this.lists.some(right => right.selected)
			},

		},

		data() {
			return {


				// shows: true,
			}
		},
		methods: {
			handleLeft: function(right, index) {

				var selectData = this.lists.filter(function(right, index) {
					return right.selected
				});
				this.list.push(...selectData);
				this.lists = this.lists.filter(function(right, index) {
					return !right.selected
				});
				this.list.sort((a, b) => a.id - b.id)
			},
			handleRight: function(item, index) {

				var selectData = this.list.filter(function(item, index) {
					return item.selected
				});
				this.lists.push(...selectData);
				this.list = this.list.filter(function(item, index) {
					return !item.selected
				});
				this.lists.sort((a, b) => a.id - b.id)
			},
			// show() {
			// 	let state = this.right.selected;
			// 	this.lists.forEach(right => {
			// 		if (!right.selected) {
			// 			this.shows = false
			// 		} else {
			// 			this.shows = true
			// 		}
			// 	})
			// 	return state

			// }
		}
	}
</script>

<style>
	.web {
		position: relative;
	}

	.card {

		position: absolute;
		left: 25%;

	}

	.card.right {
		position: absolute;
		left: 55%;
		top: 0;
	}

	.btn {
		position: absolute;
		left: 50%;
		top: 44%;
	}

	.btn.arrows {
		position: absolute;
		left: 47%;
		top: 44%;
	}
</style>
